import { Col, Form, Input, Radio, Row, Select } from 'antd';
import React from 'react';
import CodeMirror from 'src/components/ScriptEditor';
import useDataType from './data-type';
import { compare, compareClass } from '../../../utils/compare';

export default function FnConfig(props) {
  const types = useDataType();
  const usage_scope_limit_options = props.use_scope || [];
  const { getFieldDecorator, getFieldValue } = props.form;
  const fields = [
    {
      label: '函数名称',
      name: 'name',
      span: 12,
      placeholder: '请输入',
      initialValue: props.value.name,
      rules: [
        { required: true, message: '请输入' },
        { pattern: /^[\u4E00-\u9FA5_a-zA-Z0-9]+$/, message: '限中英文数字下划线' },
        { max: 128, message: '最长128个字符' },
      ],
    },
    {
      label: '函数code',
      name: 'code',
      placeholder: '请输入',
      span: 12,
      initialValue: props.value.code,
      rules: [
        { required: true, message: '请输入' },
        { max: 128, message: '最长128个字符' },
        { pattern: /^[a-zA-Z][_a-zA-Z0-9]*$/, message: '限英文数字下划线，并以英文开头' },
      ],
      disabled: props.actionType === 'update',
    },
    {
      label: '是否启用',
      name: 'status',
      span: 12,
      initialValue: props.value.status,
      component: (
        <Radio.Group className={compareClass(props, 'status')} disabled={props.actionType === 'detail'}>
          <Radio value={1}>是</Radio>
          <Radio value={2}>否</Radio>
        </Radio.Group>
      ),
      rules: [{ required: true, message: '请选择' }],
    },
    {
      label: '是否返回',
      name: 'isReturn',
      span: 12,
      initialValue: props.value.isReturn || 0,
      component: (
        <Radio.Group className={compareClass(props, 'isReturn')} disabled={props.actionType === 'detail'}>
          <Radio value={1}>是</Radio>
          <Radio value={0}>否</Radio>
        </Radio.Group>
      ),
      rules: [{ required: true, message: '请选择' }],
    },
    {
      label: '函数作用域',
      name: 'useScope',
      span: 12,
      rules: [{ required: true, message: '请选择' }],
      initialValue: props.value.useScope ? props.value.useScope : [],
      component: (
        <Select
          placeholder='请选择'
          mode='multiple'
          className={compareClass(props, 'isReturn')}
          disabled={props.actionType === 'detail'}
          showArrow={true}
        >
          {usage_scope_limit_options.map((o) => (
            <Select.Option key={o.key} value={o.key}>
              {o.value}
            </Select.Option>
          ))}
        </Select>
      ),
    },
    ((getFieldValue('isReturn') === undefined && props.value.isReturn === 1) || getFieldValue('isReturn')) && {
      label: '返回值类型',
      name: 'returnType',
      span: 12,
      rules: [{ required: props.value.isReturn, message: '请选择' }],
      initialValue: props.value.returnType,
      component: (
        <Select placeholder='请选择' style={compare(props, 'returnType')} disabled={props.actionType === 'detail'}>
          {types.map((o) => {
            return <Select.Option key={o.code}>{o.name}</Select.Option>;
          })}
        </Select>
      ),
    },
    {
      label: '描述',
      name: 'remark',
      span: 24,
      labelCol: 2,
      wrapperCol: 22,
      initialValue: props.value.remark,
      rules: [{ max: 256, message: '最长256个字符' }],
    },
    {
      label: '函数配置',
      name: 'script',
      initialValue: props.value.script,
      span: 24,
      labelCol: 2,
      wrapperCol: 22,
      placeholder: '请输入',
      rules: [{ required: true, message: '请输入' }],
      component: <CodeMirror disabled={props.actionType === 'detail'} />,
    },
  ].filter(Boolean);
  return (
    <div>
      <h3>函数配置</h3>
      <br />
      <Row gutter={30}>
        {fields.map((o) => {
          const { component, label, labelCol, wrapperCol, span, placeholder, disabled, ...rest } = o;
          return (
            <Col span={span} key={label}>
              <Form.Item
                className='disabled-override'
                label={label}
                labelCol={{ span: labelCol || 4 }}
                wrapperCol={{ span: wrapperCol || 20 }}
              >
                {getFieldDecorator(o.name, {
                  ...rest,
                })(
                  component || (
                    <Input
                      placeholder={placeholder}
                      style={compare(props, o.name)}
                      disabled={disabled || props.actionType === 'detail'}
                    />
                  ),
                )}
              </Form.Item>
            </Col>
          );
        })}
      </Row>
    </div>
  );
}
